<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Multiple series types stacked</title>

    <link href="../../assets/styles.css" rel="stylesheet" />

    <style>
      
        #chart {
      max-width: 650px;
      margin: 35px auto;
    }
    .apexcharts-tooltip-title {
      display: none;
    }
    #chart .apexcharts-tooltip {
      display: flex;
      border: 0;
      box-shadow: none;
    }
      
    </style>

    <script>
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
        )
    </script>

    
    <script src="../../../dist/apexcharts.js"></script>
    

    <script>
      // Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
      // Based on https://gist.github.com/blixt/f17b47c62508be59987b
      var _seed = 42;
      Math.random = function() {
        _seed = _seed * 16807 % 2147483647;
        return (_seed - 1) / 2147483646;
      };
    </script>

    
  </head>

  <body>
     <div id="chart"></div>

    <script>
      
        var options = {
          series: [{
            name: 'Series A',
            type: 'bar',
            group: 'Alpha',
            data: [21.1, 23, 33.1, 34, 44.1, 44.9, 56.5, 58.5]
          },
          {
            name: 'Series B',
            type: 'bar',
            group: 'Alpha',
            data: [10, 19, 27, 26, 34, 35, 40, 38]
          },
          {
            name: 'Series C',
            type: 'bar',
            group: 'Alpha',
            data: [21.1, 23, 33.1, 34, 44.1, 44.9, 56.5, 58.5]
          },
          {
            name: 'Series D',
            type: 'bar',
            group: 'Beta',
            data: [10, 19, 27, 26, 34, 35, 40, 38]
          },
          {
            name: 'Series E',
            type: 'bar',
            group: 'Beta',
            data: [21.1, 23, 33.1, 34, 44.1, 44.9, 56.5, 58.5]
          },
          {
            name: 'Series F',
            type: 'bar',
            group: 'Beta',
            data: [10, 19, 27, 26, 34, 35, 40, 38]
          },
          {
            name: 'Series X',
            type: 'bar',
            group: 'Gamma',
            data: [51.6, 47.8, 33.8, 26.5, 28.5, 35.5, 30, 20.4]
          },
          {
            name: 'Series Y',
            type: 'bar',
            group: 'Gamma',
            data: [10, 19, 27, 26, 34, 35, 40, 38]
          },
          {
            name: 'Series 1',
            type: 'area',
            group: 'Delta',
            data: [51.6, 47.8, 33.8, 26.5, 28.5, 35.5, 30, 20.4]
          },
          {
            name: 'Series 2',
            type: 'area',
            group: 'Delta',
            data: [10, 19, 27, 26, 34, 35, 40, 38]
          },
          {
            name: 'Series 3',
            type: 'line',
            group: 'Epsilon',
            data: [1.4, 2, 2.5, 3.5, 3.5, 2.8, 3.8, 3.6]
          }],
          chart: {
          height: 350,
          type: 'line',
          stacked: true,
          stackOnlyBar: false,
          dropShadow: {
            enabled: true,
            enabledOnSeries: [0,1,2,3,4,5,6,7,10]
          },
        
        },
        plotOptions: {
          bar: {
            columnWidth: '70%'
          }
        },
        dataLabels: {
          enabled: true,
          enabledOnSeries: [10]
        },
        xaxis: {
          categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016]
        },
        yaxis: [
        {
          seriesName: ['Series A','Series B','Series C',
                       'Series D','Series E','Series F'],
          axisTicks: {
            show: true,
            color: '#008FFB'
          },
          axisBorder: {
            show: true,
            color: '#008FFB'
          },
          title: {
            text: "Columns (Stacked/Grouped)",
            style: {
              color: '#008FFB'
            }
          },
          labels: {
            style: {
              colors: ['#008FFB']
            }
          }
        },{
          opposite: true,
          seriesName: ['Series X', 'Series Y'],
          axisTicks: {
            show: true,
            color: '#78909C'
          },
          axisBorder: {
            show: true,
            color: '#78909C'
          },
          title: {
            text: "Columns (Stacked)",
            style: {
              color: '#78909C'
            }
          }
        },{
          seriesName: ['Series 1','Series 2'],
          labels: {
            style: {
              colors: ['#88AA88']
            }
          },
          axisTicks: {
            show: true,
            color: '#88AA88'
          },
          axisBorder: {
            show: true,
            color: '#88AA88'
          },
          title: {
            text: "Areas (stacked)",
            style: {
              color: '#88AA88'
            }
          }
        },{
          opposite: true,
          seriesName: 'Series 3',
          labels: {
            style: {
              colors: ['#78909C']
            }
          },
          axisTicks: {
            show: true,
            color: '#78909C'
          },
          axisBorder: {
            show: true,
            color: '#78909C'
          },
          title: {
            text: "Line",
            style: {
              color: '#78909C'
            }
          }
        }
        ],
        fill: {
        type: 'gradient',
        gradient: {
          shade: 'light'
        }
        },
        stroke: {
        width: [4,4,4,4,4,4,4,4,1,1,3],
        colors: ['rgba(0,0,0,0)','rgba(0,0,0,0)','rgba(0,0,0,0)',
                 'rgba(0,0,0,0)','rgba(0,0,0,0)','rgba(0,0,0,0)',
                 'rgba(0,0,0,0)','rgba(0,0,0,0)',
                 '#fff','#fff',
                 '#222222'],
        curve: ['','','','','','','','','stepline','stepline','straight']
        },
        colors: ['#00D8B6','#008FFB','#FEB019',
               '#FF4560','#775DD0',"#95C11F",
               '#DDDDDD','#888888',
               '#88AA88','#DDEEDD',
               '#AAAAAA'],
        tooltip: {
        shared: true
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
      
      
    </script>

    
  </body>
</html>
